<template>
  <!-- 背景 -->
  <div class="bg">
    <div class="content">
      <div class="title">设置密码</div>
      <div class="line"></div>
      <div class="information">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="手机号码">
            <el-input
              placeholder="请输入手机号码"
              v-model="formLabelAlign.mobilePhone"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input placeholder="请输入验证码" v-model="formLabelAlign.code">
            </el-input>
            <el-button v-if="time == 0" class="btn_code" @click="$noMultipleClicks(getCode)"
              >获取手机验证码</el-button
            >
            <el-button v-else class="btn_code" 
              >{{ time }}s后可重发</el-button
            >
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              placeholder="请输入密码"
              v-model="formLabelAlign.passport"
            ></el-input>
          </el-form-item>
          <el-form-item label="重复密码">
            <el-input
              placeholder="请重复输入密码"
              v-model="formLabelAlign.repeatPassport"
            ></el-input>
          </el-form-item>
        </el-form>
        <button @click="submit" class="button">确认修改</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    // let timestamp = sessionStorage.getItem(this.$route.name + "Timestamp");
    // // console.log(Date.now() - timestamp < 60 * 1000);
    // if (Date.now() - timestamp < 60 * 1000) {
    //   this.time = 60 - parseInt((Date.now() - timestamp) / 1000);
    //   this.$setCodeTimer();
    // }
    this.$getCodeTimer()
  },
  data() {
    return {
      labelPosition: "left",
      formLabelAlign: {
        mobilePhone: "",
        passport: "",
        code: "",
        repeatPassport: "",
      },
      time: "",
      noClick: true,
    };
  },
  methods: {
    // setCodeTimer() {
    //   if (this.time == 0) {
    //     sessionStorage.setItem(`${this.$route.name}Timestamp`, Date.now());
    //     this.time = 60;
    //   }

    //   let timer = setInterval(() => {
    //     this.time -= 1;
    //     if (this.time <= 0) {
    //       clearInterval(timer);
    //     }
    //   }, 1000);
    // },
    // 获取验证码
    async getCode() {
      var reg_tel =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (!reg_tel.test(this.formLabelAlign.mobilePhone)) {
        this.$message.error("请输入正确的手机号码");
      } else {
        let params = { mobile: this.formLabelAlign.mobilePhone };
        let res = await this.$apiFun.getCode(params);
        console.log("验证码", res.result);
        this.$setCodeTimer();
      }
    },

    // 提交
    async submit() {
      var reg_tel =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (!reg_tel.test(this.formLabelAlign.mobilePhone)) {
        this.$message.error("请输入正确的手机号码");
      } else if (this.formLabelAlign.code == "") {
        this.$message.error("请输入正确的验证码");
      } else if (this.formLabelAlign.passport == "") {
        this.$message.error("请输入账号密码");
      } else if (
        this.formLabelAlign.repeatPassport !== this.formLabelAlign.passport
      ) {
        this.$message.error("两次密码输入不一致，请重新输入");
      } else {
        let params = {
          loginName: this.formLabelAlign.mobilePhone,
          newPwd: this.formLabelAlign.passport,
          code: this.formLabelAlign.code,
        };
        let res = await this.$apiFun.resetPwd(params);
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.$cookies.set("loginPwd", "");
          setTimeout(() => {
            this.$router.push("login");
          }, 1500);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-input {
  background: #f5f5f5 !important;
  width: 45% !important;
  position: relative !important;
}
/deep/ .el-input__inner {
  background: #f5f5f5 !important;
  width: 70% !important;
  border: none !important;
}

.bg {
  // width: 100%;
  // height: 92.5%;
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.5rem 1.25rem;
  .content {
    text-align: left;
    .title {
      font-size: 0.24rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
    }
    .line {
      width: 100%;
      height: 2px;
      background: #efefef;
      margin: 0.3rem 0;
    }
    .information {
      .el-form-item {
        position: relative;
        /deep/ .el-button {
          width: 1.2rem;
          position: absolute;
          left: 2.677rem;
          font-size: 0.16rem;
          font-weight: 400;
          text-decoration: underline;
          color: #333333;
          border: none;
          background: transparent;
        }
      }
      .button {
        width: 1.9rem;
        height: 0.4rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        font-size: 0.16rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 0.3rem;
        margin-top: 0.6rem;
        margin-left: 1.3rem;
        cursor: pointer;
        display: block;
      }
    }
  }
}
</style>